<!-- 我的结构树 -->

<template>
  <div class="MyTree">
    <EasyTree
      v-model="selectParam.areaId"
      class="MyTree-tree"
      :tree="CORE.REGION.TREE"
      :field="['nodes', 'id', 'name']"
      filterTip="搜索"
      @change="toChange"
    >
      <template #default="{ data, nodeClass }">
        <div :class="nodeClass">
          <div v-if="data.device">
            <img :src="data.id === selectParam.deviceId ? deviceImgActive : deviceImg" />
            <span>{{ data.name }}</span>
          </div>
          <div v-else>{{ data.name }}</div>
        </div>
      </template>
    </EasyTree>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import Vue from 'vue'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyTree',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixScreen(), CORE.mixOne(), CORE.mixSelect()],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 设备图片
     */
    deviceImg() {
      const { DICT, infoParam, getImg } = this
      const matched = DICT.SUB_SYSTEM.find((item) => item[0] === infoParam.subSystemId)
      return matched ? getImg(matched[2], '_tree') : ''
    },

    /**
     * 激活的设备图片
     */
    deviceImgActive() {
      const { DICT, infoParam, getImg } = this
      const matched = DICT.SUB_SYSTEM.find((item) => item[0] === infoParam.subSystemId)
      return matched ? getImg(matched[2], '_tree_active') : ''
    },

    /**
     * 树映射
     */
    treeMap() {
      return CORE.REGION.MAP
    },
  },

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听下拉设备就绪
     */
    readySelect(ready) {
      ready && this.setAreaDevice()
    },

    /**
     * 监听下拉设备就绪
     */
    infoType() {
      this.changeAreaDevice(CORE.REGION.TREE, this.infoParam.subSystemId)
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 切换结构树
     */
    toChange({ id, device }) {
      const { selectParam, setOne, infoParam, treeMap, setSelect, startSelect } = this

      if (device) {
        // 设备激活的 ID
        selectParam.deviceId = id
        // 设置选中的设备
        setOne({ areaId: id, device })
      } else {
        // 查询区域设备
        CORE.merge(selectParam, { areaId: id, deviceId: '' })
        const needStart = !treeMap[id][`device_${infoParam.subSystemId}`]
        if (needStart) {
          setSelect()
          startSelect()
        }
      }
    },

    /**
     * 设置区域设备
     */
    setAreaDevice() {
      const { DICT, select, selectParam, treeMap, infoParam } = this
      if (select.length < DICT.SUB_SYSTEM.length) return

      const area = treeMap[selectParam.areaId] || { children: [] }
      DICT.SUB_SYSTEM.forEach(([subSystemId], i) => {
        const deviceList = select[i].map((device) => ({
          nodes: [],
          id: device.id,
          name: device.deviceName,
          device,
        }))
        Vue.set(area, `device_${subSystemId}`, deviceList)
      })

      const activeDevice = area[`device_${infoParam.subSystemId}`] || []
      Vue.set(area, 'childrenLeaf', activeDevice)
      Vue.set(area, 'nodes', [...activeDevice, ...area.children])
    },

    /**
     * 切换区域设备
     */
    changeAreaDevice(tree, subSystemId) {
      tree.forEach((area) => {
        const deviceList = area[`device_${subSystemId}`]
        if (deviceList) {
          Vue.set(area, 'childrenLeaf', deviceList)
          Vue.set(area, 'nodes', [...deviceList, ...area.children])
        }
        this.changeAreaDevice(area.children, subSystemId)
      })
    },

    /**
     * 获取节点样式类
     */
    getNodeClass(data) {
      const { chosenId, select } = this
      if (select && data.disabled) return 'CoreWeb-EasyTree-disabled'
      if (this.infoParam.subSystemId === chosenId) return 'CoreWeb-EasyTree-chosen'
      return null
    },

    /**
     * 获取图片
     */
    getImg(img, suffix = '') {
      return require(`@screen/assets/img/Monitor/${img}${suffix}.png`)
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
